'use client' // 表明这是客户端组件

import { useState } from 'react'
import type { ReactNode } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
// 布局是指多个页面（page）共享的UI，在导航的时候，布局会保留状态，保持可交互性并且不会重新渲染
export default function Layout({ children }: { children: ReactNode}) {
  const [count, setCount] = useState(0)
  const pathname = usePathname()
  return (
    <>
    <div>path:name { pathname }</div>
      <div>
        <Link href="/dashboard/about">About</Link>
        <br/>
        <Link href="/dashboard/settings">Settings</Link>
      </div>
      <h1>Layout {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      {children}
    </>
  )
}
